<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="container">
      <div class="content" style="width: 100%; word-wrap: break-word">
        <button id="button">点击卡顿</button>
      </div>
    </div>
    <script>
      document.getElementById("button").addEventListener("click", function () {
        // 模拟页面卡顿
        for (let i = 0; i < 1000000000; i++) {
          // do nothing
        }
      });
    </script>
  </body>
</html>

<!-- <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>前端监控SDK</title>
    <script src="monitor.js"></script>
  </head>
  <body>
    <div id="container">
      <p style="color: red">hello</p>
      <div class="content" style="width: 100%; word-wrap: break-word">
        <button id="CLICKBTN" onclick="clickMe()">Click Me</button>
      </div>
    </div>
    <script>
      function clickMe() {
        let start = Date.now();
        while (Date.now() - start < 1000) {}
      }
      setTimeout(() => {
        let content = document.getElementsByClassName("content")[0];
        let h1 = document.createElement("h1");
        h1.innerHTML = "我是这个页面中最有意义的内容";
        h1.setAttribute("elementtiming", "meaningful");
        content.appendChild(h1);
      }, 2000);
    </script>
  </body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>前端监控SDK</title>
    <script src="monitor.js"></script>
  </head>
  <body>
    <div id="container">
      <div class="content" style="width: 100%; word-wrap: break-word"></div>
    </div>
    <script>
      // Dom解析完成后，即使依赖的资源没有加载完成，也会触发这个事件
      document.addEventListener("DOMContentLoaded", function () {
        let Start = Date.now();
        while (date.now() - Start < 5000) {}
      });
    </script>
  </body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>前端监控SDK</title>
    <script src="monitor.js"></script>
  </head>
  <body>
    <div id="container">
      <div class="content">
        <input
          id="successBtn"
          type="button" 
          value="ajax成功请求"
          onclick="sendSuccess()"
        />
        <input
          id="errorBtn"  
          type="button"
          value="ajax失败请求"
          onclick="sendError()" 
        />
      </div>
    </div>
    <script>
      function sendSuccess() {
        let xhr = new XMLHttpRequest();
        xhr.open(
          "POST",
          "http://192.168.60.38:32753/visiondevice/systemConfig/getDetail",
          true
        );
        xhr.responseType = "json";
        xhr.onload = function () {
          console.log(xhr.response);
        };
        xhr.send();
      }
      // 发送错误报错
      function sendError() {
        let xhr = new XMLHttpRequest();
        xhr.open(
          "POST",
          "http://192.168.60.38:32753/visiondevice/checkParamConfig/getDetailsAAAA",
          true
        );
        xhr.responseType = "json";
        xhr.onload = function () {
          console.log(xhr.response);
        };
        xhr.onerror = function (error) {
          console.log("error", error);
        };
        xhr.send();
      }
    </script>
  </body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>前端监控SDK</title>
    <script src="monitor.js"></script>
  </head>
  <body>
    <div id="container">
      <div class="content" style="width: 100%; word-wrap: break-word"></div>
    </div>
    <script>
      let content = document.getElementsByClassName("content")[0];
      content.innerHTML = "<span>aaa</span>".repeat(10000);
    </script>
  </body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>前端监控SDK</title>
    <script src="monitor.js"></script>
    <link rel="stylesheet" href="monitor.css" />
    <script src="../monitorAAA.js"></script>
  </head>
  <body>
    <div id="container">
      <div class="content">
        <input type="button" value="点击抛出JS错误" onclick="errorClick()" />
        <input
          type="button"
          value="点击抛出Promise错误"
          onclick="promiseErrirClick()"
        />
      </div>
    </div>
    <script>
      // js抛出异常
      function errorClick() {
        window.someVar.error = "error";
      }
      // promise错误
      function promiseErrirClick() {
        new Promise((resolve, reject) => {
          window.someVar.error = "error";
          reject("error");
        }).then((result) => {
          console.log(result);
        });
      }
    </script>
  </body>
</html> -->
